<template>
	<div class="logo_box">
		<img class="logo_img" src="https://fes.qyerstatic.com/fe_ssr_passport/41bd0a522fbeb024a41208a408ca73ec.png" alt="">
		<span class="title">登录</span>
	</div>
	<div class="out_box">
		<div class="login_box">
			<div class="title_tab">
				<ul class="my_ul" style="height: 40px;">
					<li data-num='0'>账号登录</li>
					<li data-num='1'>短信快捷登录</li>
				</ul>
				<span class="underline" style="left: 0px;">账号登录</span>
			</div>
			<div class="login_info_box">
				<div class="login_tip">
					关于穷游网将实行<span style="color: #28b76c;">手机绑定实名制的说明</span>
				</div>
				<div class="input_box account_box">
					<input data-type="account" onblur="checkData(event,'account')" value="18123067401" type="text" class="input" placeholder="手机号">
					<div class="err_tip">
						<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
						<span class="err_info">请输入邮箱/手机号/用户名</span>
					</div>
				</div>
				<div class="input_box password_box">
					<input data-type="password" onblur="checkData(event,'password')" type="text" class="input" placeholder="密码">
					<div class="err_tip">
						<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
						<span class="err_info">请输入6-16位登录密码</span>
						<span class="info">忘记密码</span>
					</div>
				</div>
				<div class="input_box meg_code_box">
					<input data-type="msgCode" type="text" onblur="checkData(event,'msgCode')" class="input" placeholder="验证码">
					<button class="get_msg_code" onclick="toGetMsgCode(1)">获取验证码</button>
					<div class="err_tip">
						<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
						<span class="err_info">请输入6位数字验证码</span>
					</div>
				</div>
				<button class="login_but" onclick="toLogin()">
					登录
				</button>
				<div class="login_auth_box">
					<img class="auth_icon" src="https://fes.qyerstatic.com/FkHhVOT0BMK6LN3mOQ1qACNwKzlI" alt="">
					<img class="auth_icon" src="https://fes.qyerstatic.com/FugnPbgTJd9eGwDRpbL4L-bEsZaZ" alt="">
					<img class="auth_icon" src="https://fes.qyerstatic.com/FiMZfg-o4O6kGlKgQNBUEbLPY-0A" alt="">
					<img class="auth_icon" src="https://fes.qyerstatic.com/FtOA3elXgqZZY7Oa16ZRZt8Jsvnn" alt="">
				</div>
				<div class="bottom_tip register_bottom">
					<span>没有穷游帐号？</span>
					<span style="color: #28b76c;" onclick="loginRegister('register')">立即注册</span>
					<span class="info">境外手机号登录</span>
				</div>
			</div>
		</div>
		<!-- <div class="register_box">
			<div class="login_info_box">
				<div class="input_box account_box">
					<input type="text" data-type="phoneNum" onblur="checkData(event,'phoneNum')" class="input iphone" placeholder="手机号">
					<div class="err_tip">
						<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
						<span class="err_info">请输入手机号/用户名</span>
					</div>
				</div>
				<div class="input_box password_box">
					<input type="text" data-type="password" onblur="checkData(event,'password')" class="input" placeholder="密码">
					<div class="err_tip">
						<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
						<span class="err_info">请输入6-16位登录密码</span>
						<span class="info">忘记密码</span>
					</div>
					
				</div>
				<div class="input_box meg_code_box">
					<input type="text" data-type="msgCode" onblur="checkData(event,'msgCode')" class="input" placeholder="验证码">
					<button class="get_msg_code" onclick="getMsgCode(2)">获取验证码</button>
					<div class="err_tip">
						<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
						<span class="err_info">请输入6位数字验证码</span>
					</div>
				</div>
				<button class="login_but" onclick="toRegister()">
					注册
				</button>
				<div class="login_auth_box">
					<img class="auth_icon" src="https://fes.qyerstatic.com/FkHhVOT0BMK6LN3mOQ1qACNwKzlI" alt="">
					<img class="auth_icon" src="https://fes.qyerstatic.com/FugnPbgTJd9eGwDRpbL4L-bEsZaZ" alt="">
					<img class="auth_icon" src="https://fes.qyerstatic.com/FiMZfg-o4O6kGlKgQNBUEbLPY-0A" alt="">
					<img class="auth_icon" src="https://fes.qyerstatic.com/FtOA3elXgqZZY7Oa16ZRZt8Jsvnn" alt="">
				</div>
				<div class="bottom_tip register_bottom">
					<span>已有穷游帐号？</span>
					<span style="color: #28b76c;" onclick="loginRegister('login')">登录</span>
					<span class="info">同意<span style="color: #28b76c;">会员条款</span>和<span
							style="color: #28b76c;">免责声明</span>
					</span>
				</div>
			</div>
		</div> -->
		<div class="bg_box">
			
		</div>
	</div>
</template>

<script type="module">
	export default{
		data() {
			return{
				
			}
		}
	}
	
	import userApi from "./api/userApi.js"
	import cacheUtil from "./util/cacheUtil.js"
	import publicApi from "./api/publicApi.js"
	import constants from "./common/constants.js"
	
	const left_box = document.querySelector(".left_box")
	const right_box = document.querySelector(".right_box")
	const submit = document.querySelector(".submit")
	const img_box = document.querySelector(".img_box")
	const userName = document.querySelector(".userName")
	const account = document.querySelector(".account")w333
	const imgSrc = document.querySelector(".imgSrc")
	const name = document.querySelector('input[data-type=username]')
	const email = document.querySelector('input[data-type=email]')
	const age = document.querySelector('input[data-type=age]')
	const introduce = document.querySelector('textarea[name=introduce]')
	const genderList = document.querySelectorAll("input[name=gender]")
	const hobbyArray = document.querySelectorAll("input[name=checkbox]")
	const validateConfig = constants.VALIDATE_CONFIG
	const token = cacheUtil.getlocalstroge('userInfo').token;
	
	init()
	function init(){
		initUserInfo()
	}
	
	// 初始化信息
	function initUserInfo() {
		const userInfo = cacheUtil.getlocalstroge('userInfo')
		if (userInfo) {
			imgSrc.src = userInfo.avatar
			userName.innerText = userInfo.name
			account.innerHTML = `账号：${userInfo.account}成都·龙泉`
			name.value = userInfo.name
			email.value = userInfo.email
			age.value = userInfo.age
			for (let val of genderList) {
				if (val.value == userInfo.gender) {
					val.checked = 'checked'
				}
			}
			for (let val of hobbyArray) {
				if (userInfo.hobby.includes(val.value)){
					val.checked = 'checked'
				}
			}
			introduce.value = userInfo.introduce
		}
	}
	
	
	
	
	// // 上传
	// function sumbit(){
	// 	submit.onclick =function(){
	// 		console.log(111)
	// 		// console.log(finishUserInfos)
	// 		const userinput = left_box.querySelector('.user')
	// 		const userinputdom = userinput.querySelector('input')
	// 		const emailinput = left_box.querySelector('.email')
	// 		const emailinputdom = emailinput.querySelector('input')
	// 		const ageinput = left_box.querySelector('.age')
	// 		const ageinputdom = ageinput.querySelector('input')
	// 		const genderinput = left_box.querySelector('.gender')
	// 		const genderinputdom = genderinput.querySelector('input')
	// 		const introduceinput = right_box.querySelector('.introduce')
	// 		const introduceinputdom = introduceinput.querySelector('textarea')
			
	// 		let finishUserInfos= {
	// 				age:ageinputdom.value,
	// 				avatar:imgSrc.src,
	// 				email:emailinputdom.value,
	// 				gender:genderinputdom.value,
	// 				hobby :[],
	// 				introduce:introduceinputdom.value,
	// 				name:userinputdom.value
	// 		}
			
	// 		userApi.finishUserInfo(finishUserInfos).then((data)=>{
				
	// 			userName.innerHTML = data.name
	// 			imgSrc.src = data.avatar
	// 			account.innerHTML = `账号：${data.account}成都·龙泉`
	// 			console.log(data)
	// 			loginSuccess(data)
	// 		})
	// 	}
	// }
	// userApi.upload(upload1).then((data)=>{
	// 	console.log(data)
	// })
	console.log(token)
	
	function loginSuccess(data){
		cacheUtil.setlocalstroge('userInfo',data)
		// window.location.href = './index.html'
	}
	// 输入框的数据校验
	window.onload = function(){
		this.checkData = function(e){
			console.log(checkInputData(e.target));
			checkInputData(e.target)
		}
		this.chooseFile = async function(){
			const arrFileHandle = await window.showOpenFilePicker({
				 types: [{
					description:'只能选择图片文件',
				    accept:{
				        'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp']
				    }
				}],
				multiple:false
			});
			let file = await arrFileHandle[0].getFile();
			console.log(file)
			
			const forData = new FormData()
			forData.append('file',file);
			publicApi.uploadFile(forData).then(data => {
				imgSrc.src = data;
			})
		}
		// 提交用户信息
		this.uploadFile = function() {
			let inputList = document.querySelectorAll('input[type=text]');
			
			inputList = [...inputList]
			console.log(inputList)
			inputList.push(document.querySelector('textarea'))
			const param =checkAllData(inputList)
			
			if(param){
				param.avatar = imgSrc.src;
				param.gender = document.querySelector('input[name=gender]:checked').value
				param.hobby = []
				const hobbyList = document.querySelectorAll('input[name=hobby]:checked')
				for(let val of hobbyList){
					param.hobby.push(val.value)
				}
			}
			console.log(param);
			
			userApi.finishUserInfo(param).then(data => {
				uploadSuccess(data)
			})
		}
	}
	// 修改信息成功
		function uploadSuccess(data){
	// 更新缓存
		catchUtil.setLocalStorage('userInfo',data)
		init()
		setTimeout(() => {
			// 返回上一页
			window.history.go(-1)
		},1000)
	}
		
		// 校验单个的输入框
		function checkInputData(inputDom){
			const value = inputDom.value;
			const type = inputDom.getAttribute('data-type');
			// input 的父级对象parentDom
			const parentDom = inputDom.parentElement
			console.log(parentDom)
			const errTip = parentDom.querySelector('.err_tip')
			
			const errInfo = parentDom.querySelector('.err_info')
			if(validateConfig[type].regExp.test(value)){
				console.log(errTip)
				errTip.style.visibility = 'hidden'
				return true;
			}else{
				errTip.style.visibility = 'visible'
				errInfo.innerText = validateConfig[type].tipInfo
				return false;
			}
		}
		
		// 校验多个输入框的数据
		const inputList = left_box.querySelectorAll('input')
		
		const param = checkAllData(inputList)
		console.log(param);
		
		
		
		function checkAllData(inputList){
			let reustl = true
			const param = {}
			for(let val of inputList){
				if(!checkInputData(val)){
					reustl = false
				}
				param[val.getAttribute('data-type')] = val.value
			}
			if(reustl){
				return param
				// console.log(param);
			}
			return reustl
		}
</script>

<style>
	*{
		margin: 0px;
		padding: 0px;
		list-style: none;
	}
	body{
		width: 100vw;
		height: 100vh;
		background-image: url(https://fes.qyerstatic.com/fe_ssr_passport/ecb39528d488b6c520f7ddd3898379d6.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.logo_box{
		text-align: center;
		.logo_img{
			width: 126.5px;
			height: 46px;
			
		}
		.title{
			font-size: 24px;
			color: #FFFFFF;
			line-height: 46px;
			vertical-align: bottom;
		}
	}
	.out_box{
		display: flex;
		align-items: center;
		margin-top: 40px;
		.login_box,.register_box{
			width: 380px;
			box-sizing: border-box;
			padding: 24px 24px;
			background-color: #FFFFFF;
			.title_tab {
				width: 100%;
				position: relative;
				line-height: 16px;
			}
			
			.title_tab li {
				width: 165px;
				height: 38px;
				text-align: center;
				list-style: none;
				float: left;
				font-size: 16px;
				display: inline-block;
				line-height: 40px;
				border-bottom: 1px solid #e5e5e5;
				overflow: visible;
				cursor: pointer;
			}
			
			.title_tab .li_choosed {
				color: #3f9f5f;
			}
			
			.underline {
				position: absolute;
				width: 165px;
				height: 100%;
				line-height: 30px;
				border-bottom: 2px solid #28b76c;
				bottom: 1px;
				color: hsla(0, 0%, 100%, 0);
				font-size: 18px;
				cursor: pointer;
				transition: left 0.2s linear;
			}
			.login_info_box{
				width: 100%;
				.login_tip {
					width: 100%;
					font-size: 14px;
					line-height: 60px;
					height: 50px;
					color: #959595;
				}
				.input_box {
					.input {
						box-sizing: border-box;
						padding: 3px 7px;
						border: 1px solid #d7d7d7;
						width: 100%;
						height: 40px;
						line-height: 40px;
						font-size: 14px;
						vertical-align: top;
						background: #fff;
						outline: none;
					}
				
					.err_tip {
						height: 30px;
						line-height: 30px;
						color: #ff654c;
						font-size: 12px;
						display: flex;
						align-items: center;
						visibility: hidden;
				
						.err_icon {
							flex-shrink: 0;
							width: 12px;
							height: 12px;
							margin-bottom: -2px;
							margin-right: 4px;
						}
				
						.err_info {
							flex-shrink: 0;
						}
				
						.info {
							width: 100%;
							text-align: end;
							color: #959595;
							cursor: pointer;
						}
					}
				}
				.meg_code_box {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
				
					.input {
						box-sizing: border-box;
						padding: 3px 7px;
						border: 1px solid #d7d7d7;
						width: 200px;
						height: 40px;
						line-height: 40px;
						font-size: 14px;
						vertical-align: top;
						background: #fff;
						outline: none;
					}
				
					.get_msg_code {
						display: inline-block;
						box-sizing: border-box;
						border: 0;
						padding: 0 15px;
						width: 125px;
						height: 40px;
						line-height: 36px;
						border-radius: 3px;
						font-size: 14px;
						color: #fff;
						cursor: pointer;
						vertical-align: top;
						background-color: #3f9f5f;
					}
				}
				.login_but {
					display: inline-block;
					box-sizing: border-box;
					border: 0;
					padding: 0 15px;
					width: 100%;
					height: 36px;
					line-height: 36px;
					border-radius: 3px;
					font-size: 16px;
					color: #fff;
					cursor: pointer;
					vertical-align: top;
					background-color: #3f9f5f;
				}
				.login_auth_box {
					width: 100%;
					box-sizing: border-box;
					padding: 40px 12px 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;
				
					.auth_icon {
						width: 40px;
						height: 40px;
					}
				}
				
				.bottom_tip {
					width: 100%;
					padding: 10px 0;
					height: 20px;
					line-height: 20px;
					color: #959595;
					font-size: 14px;
					display: flex;
					align-items: center;
					box-sizing: border-box;
				
					.info {
						width: 100%;
						text-align: end;
						flex-shrink: 1;
					}
				}
				
				.bottom_tip span {
					flex-shrink: 0;
				}
			}
		}
		.bg_box {
			background-image: url(https://fes.qyerstatic.com/FoLbAXJtwbB5SVORRmihPFWD-oYM);
			width: 275px;
			height: 494px;
			background-repeat: no-repeat;
			background-position: 50%;
			background-color: #f5f5f5;
			background-size: auto 100%;
			
		}
	}
</style>